<template>
  <div id="ss">
    <div class="hair">
      <p>升级VIP会员&nbsp;&nbsp;预计可省￥358+元</p>
      <!-- 商品 -->
      <van-grid icon-size="40px" column-num="3" :gutter="6" id="ed">
        <van-grid-item v-for="(item, i) in vipaha" :key="i">
          <van-image :src="item.icon" />
          <span class="fff">{{ item.text1 }}</span>
          <span>{{ item.text2 }}</span>
          <span>{{ item.text3 }}</span>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 升级vip模块 -->
    <div class="upgrade">立即升级￥99/年</div>
    <!-- 小推荐模块 -->
    <div class="recommend">
      <img src="../../public/images/Vip/8.jpg" alt="" />
    </div>
    <h3 style="text-align: center; font-weight: 400; margin-top: 1rem">
      ———&nbsp;&nbsp;&nbsp;&nbsp;会员专享权益&nbsp;&nbsp;&nbsp;&nbsp;———
    </h3>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" title="sdfsdfsdfds" @click.stop>
        <div class="block" title="坦克子弹">
          <div class="nav">
            <h3>积分会员的介绍</h3>
            <span @click="show = false">X</span>
          </div>
          <div class="blockli">
            <h4>Q: 什么是aha会员？</h4>
            A:
            aha会员是诺心特别推出的全新会员权益，旨在向用户提供更高品质的客户服务。
            <h4>Q: 如何成为aha会员？</h4>
            A:
            用户可在诺心官网通过付费激活会员，aha会员费99元/年；或得会员资格，享受非付费aha会员权益。
            <h4>Q: aha会员权益有哪些？</h4>
            A: aha会员权益分为付费aha会员专享权益、非付费aha会员权益。
            <h4>Q: aha会员有效期有多久？</h4>
            A: aha会员权益付费激活后即刻生效，有效期1年。
            <h4>Q:aha会员过期后怎么办？</h4>
            A: aha会员如过期，可通过支付会员费重新激活。
            <h4>Q:哪些城市的用户可以申请aha会员？</h4>
            A:用户在申请aha会员时，需考虑收货地址是否属于诺心蛋糕冷链配送范围内。当前蛋糕可配送区域为：上海、南京、杭州、苏州、宁波、无锡、绍兴、嘉兴、北京、天津、广州、深圳、成都；特例商品配送区域以官网信息为准。
          </div>
        </div>
      </div>
    </van-overlay>
    <p
      @click="show = true"
      style="
        text-align: center;
        margin-top: 1rem;
        text-decoration: underline;
        color: #3f3f3f;
        font-size: 0.9rem;
      "
    >
      权益说明
    </p>
    <!-- 大咖沙龙模块 -->
    <div class="enjoy">
      <div>
        <h3>大咖沙龙</h3>
        <p>心选人气蛋糕 会员专享优惠价</p>
      </div>
      <ul>
        <li v-for="(item, index) in 2" :key="index">
          <router-link to="/detail?id=10&name=茶草京都">
            <img src="../../public/img/list_20105.jpg" alt="" />
            <div>
              <span>茶草京都</span>
              <span
                ><p>会员专享:</p>
                ￥215</span
              >
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 查看更多 -->
    <router-link to="/product">
      <div class="more">查看更多</div>
    </router-link>
    <!-- 小隔离 -->
    <div class="dao"></div>
    <!-- 狂欢派对 -->
    <div class="party">
      <h3>狂欢派对</h3>
      <p>购买环游世界蛋糕2-4人食加大为5-8人食</p>
      <div>
        <img src="../../public/images/Vip/9.jpg" alt="" />
      </div>
    </div>
    <!-- 立即使用 -->
    <div class="more">立即使用</div>
    <!-- 小隔离 -->
    <div class="dao"></div>
    <!-- 狂欢派对 -->
    <div class="party">
      <h3>乐翻全场</h3>
      <p>全场蛋糕立减60元</p>
      <div>
        <img src="../../public/images/Vip/10.jpg" alt="" />
      </div>
    </div>
    <!-- 立即使用 -->
    <div class="more">立即使用</div>
    <!-- 小隔离 -->
    <div class="dao"></div>
    <!-- 狂欢派对 -->
    <div class="party">
      <h3>趣享甜宠</h3>
      <p>0元加购价值174元三份【绵软熊吐司】口味任选</p>
      <div>
        <img src="../../public/images/Vip/11.jpg" alt="" />
      </div>
    </div>
    <!-- 立即使用 -->
    <div class="more">立即使用</div>
    <!-- 小隔离 -->
    <div class="dao"></div>
    <!-- 积分 -->
    <div class="integral">
      <h2>积分返利</h2>
      <p>100值积分=1元</p>
      <ul style="color: #ffffff; font-size: 0.7rem">
        <li>您当前的积分值:0</li>
        <li>已使用的积分值:0</li>
        ——————————
        <li>如何获得积分值？</li>
        <li>(订单实付金额-运费)+100=aha值</li>
      </ul>
      <div class="foot">更多积分会员惊喜权益 敬请期待！</div>
    </div>
    <div id="navigation" @click="Pay">立即升级￥99/年</div>
  </div>
</template>

<script>
// //  导航栏监听事件
// document.addEventListener("scroll", function (event) {
//   var scrollDistance =
//     window.pageYOffset ||
//     document.documentElement.scrollTop ||
//     document.body.scrollTop;
//   if (scrollDistance > 450) navigation.style.display = "block";
//   else navigation.style.display = "none";
// });
import uuid from "../untils/uuid.js"
export default {
  mounted() {
    window.scrollTo(0, 0)
  },
  data() {
    return {
      show: false,
      vipaha: [
        {
          icon: require("../../public/images/Vip/1.png"),
          text1: "狂欢派对",
          text2: "人气蛋糕",
          text3: "优惠加大",
        },
        {
          icon: require("../../public/images/Vip/2.png"),
          text1: "乐翻全场",
          text2: "全场蛋糕",
          text3: "专享立减￥60",
        },
        {
          icon: require("../../public/images/Vip/3.png"),
          text1: "趣享甜宠",
          text2: "绵软熊吐司",
          text3: "享0元加购¥174",
        },
        {
          icon: require("../../public/images/Vip/4.png"),
          text1: "大咖沙龙",
          text2: "心选蛋糕",
          text3: "享会员价",
        },
        {
          icon: require("../../public/images/Vip/5.png"),
          text1: "早安吃呗",
          text2: "吃呗早餐",
          text3: "买2赠1",
        },
        {
          icon: require("../../public/images/Vip/6.png"),
          text1: "积分值返利",
          text2: "1积分值=1元",
          text3: "返利当钱花",
        },
      ],
    }
  },
  methods: {
    Pay() {
      if (localStorage.getItem("token") != null) {
        let url = "/v1/alipay/pay";
        let token = localStorage.getItem("token");
        let params = { orderId: uuid(), price: 9900, token };
        this.$get(url, params).then((res) => {
          if (res.data.code == 1) {
            console.log(res.data.data);
            window.location.href = res.data.data;
          }
        });
      } else {
        this.$toast("请先登录");
        this.$router.push("/usercenter");
      }
    },
  },
}
</script>

<style lang="scss">
#ss {
  .block .nav {
    width: 89%;
    height: 3.125rem;
    position: fixed;
    text-align: center;
    margin: auto;
    line-height: 3.125rem;
    background-color: white;
  }
  .block .nav span {
    position: absolute;
    top: 0rem;
    float: right;
    right: 1rem;
    color: orange;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .block {
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    width: 90%;
    height: 31.25rem;
    background-color: #fff;
  }
  .block .blockli {
    margin-top: 3.125rem;
    padding: 0rem 1rem;
    font-size: 0.9rem;
  }

  //小隔档
  .dao {
    width: 100%;
    height: 1rem;
    background-color: #f4f4f4;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }

  // 顶部导航栏模块
  .hair {
    overflow: hidden;
    width: 100%;
    height: 20rem;
    background-image: url("../../public/images/Vip/1.jpg");
    background-size: 100%;

    // 商品排列
    > .van-grid {
      font-size: 0.7rem;
      padding-top: 25%;
      width: 94%;
      margin: 0 auto;
      [class*="van-hairline"]::after {
        border: none;
      }
      color: #3f3f3f;
      // 单独商品
      > .van-grid-item {
        > .van-grid-item__content {
          padding: 0;
          background: rgba(0, 0, 0, 0);
          > div > img {
            display: block;
            width: 95%;
            height: 90%;
            margin: 0 auto;
          }
          > span {
            line-height: 1.1rem;
          }
          > .fff {
            margin-top: -0.1rem;
            color: #ffffff !important;
          }
        }
      }
    }
  }
  .hair p {
    width: 100%;
    height: 1rem;
    z-index: 1;
    position: absolute;
    top: 1.7rem;
    color: white;
    text-align: center;
  }

  // <!-- 升级vip模块 -->
  .upgrade {
    width: 90%;
    margin: auto;
    margin-top: 1rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    font-weight: 700;
    color: white;
    background: url("../../public/images/Vip/7.png");
    background-size: 100%;
  }
  // 小推荐模块
  .recommend {
    width: 95%;
    margin: auto;
    margin-top: 1rem;
  }
  .enjoy {
    width: 95%;
    margin: auto;
    margin-top: 2rem;
    > div {
      width: 100%;
      height: 3rem;
      padding-left: 3%;
      > p {
        padding: 0.5rem 0rem;
        color: #9c9c9c;
        font-size: 0.8rem;
      }
    }
    > ul {
      margin-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 96%;
      margin: 0 auto;
      > li {
        width: 48%;
        height: 16rem;
        margin-top: 1rem;
        img {
          display: block;
          width: 100%;
          height: 70%;
        }
        span {
          display: block;
          padding-left: 2%;
        }
        span:nth-child(1) {
          color: #000000;
          font-size: 0.8rem;
          padding-top: 0.5rem;
        }
        span:nth-child(2) {
          margin-top: 0.3rem;
          font-size: 1rem;
          color: #ddc092;
          font-weight: 700;
          > p {
            display: inline-block;
            font-size: 0.6rem;
            color: #fff;
            background-color: #ff3200;
            padding: 0 0.2rem;
          }
        }
      }
      > li:hover {
        box-shadow: 0rem 0rem 0.5rem 0.1rem #dee1e6;
      }
    }
  }
  // 更多
  .more {
    width: 100%;
    border-top: 0.1rem solid #e0dcd1;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    color: #ddc092;
  }
  // 狂欢派对
  .party {
    width: 98%;
    margin: auto;
    height: 15rem;
    h3,
    p {
      padding-left: 3%;
    }
    p {
      color: #9c9c9c;
      margin-top: 0.3rem;
      font-size: 0.8rem;
    }
    div {
      width: 94%;
      margin: 0 auto;
      margin-top: 1rem;
      height: 70%;
      img {
        width: 100%;
      }
    }
  }
  //积分
  .integral {
    width: 95%;
    margin: auto;
    height: 10rem;
  }
  .integral p:nth-child(2) {
    padding: 0.5rem 0rem;
    color: #9c9c9c;
  }
  .integral ul {
    width: 100%;
    padding: 1rem;
    height: 12rem;
    background: url("../../public/images/Vip/12.png") no-repeat;
    background-size: 100%;
    color: white;
  }
  .integral ul li {
    margin-top: 0.3rem;
  }
  // 敬请期待
  .foot {
    width: 100%;
    height: 6rem;
    background-color: #f4f4f4;
    text-align: center;
    line-height: 4rem;
    // margin-top: 1rem;
    margin-bottom: 1rem;
    color: #a8a8a8;
  }
  // 底部导航栏
  #navigation {
    width: 100%;
    background: url("../../public/images/Vip/7.png");
    background-size: 100%;
    position: fixed;
    text-align: center;
    height: 3rem;
    line-height: 3rem;
    bottom: -0.1rem;
    color: white;
    font-size: 1rem;
  }
}
</style>
